import {
  PlusOutlined,
  HomeOutlined,
  ContactsOutlined,
  ClusterOutlined,
} from '@ant-design/icons';
import { Avatar, Card, Col, Divider, Input, Row, Tag } from 'antd';
import React, { useState, useRef, FC } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { Link, useRequest } from 'umi';
import DaoProposal from './components/DaoProposal';
import Articles from './components/Articles';
import DaoTask from './components/DaoTask';
import type { CurrentUser, TagType, tabKeyType } from './data';
import styles from './Center.less';
import { currentUseDetail } from './data';

const operationTabList = [
  {
    key: 'daoProposal',
    tab: (
      <span>
        提案 <span style={{ fontSize: 14 }}></span>
      </span>
    ),
  },
  {
    key: 'daoTask',
    tab: (
      <span>
        任务 <span style={{ fontSize: 14 }}></span>
      </span>
    ),
  },
];

type CenterProps = {
  DAOInfo: any;
};

const Center: FC<CenterProps> = ({ DAOInfo }) => {
  const [tabKey, setTabKey] = useState<tabKeyType>('daoProposal');

  //  获取用户信息
  const currentUser = currentUseDetail;

  //  渲染用户信息
  const renderUserInfo = ({
    title,
    group,
    serialNo,
    daoAddress,
    phone,
  }: Partial<CurrentUser>) => {
    return (
      <div className={styles.detail}>
        <p>
          <ContactsOutlined
            style={{
              marginRight: 8,
            }}
          />
          {serialNo}
        </p>
        <p>
          <ClusterOutlined
            style={{
              marginRight: 8,
            }}
          />
          {phone}
        </p>
        <p>
          <HomeOutlined
            style={{
              marginRight: 8,
            }}
          />
          {daoAddress}
        </p>
      </div>
    );
  };

  // 渲染tab切换
  const renderChildrenByTabKey = (tabValue: tabKeyType) => {
    if (tabValue === 'daoProposal') {
      return <DaoProposal />;
    }
    if (tabValue === 'daoTask') {
      return <DaoTask />;
    }
    return null;
  };

  return (
    <GridContent>
      <Row gutter={24}>
        <Col lg={7} md={24}>
          <Card bordered={false} style={{ marginBottom: 24 }}>
            {currentUser && (
              <div>
                <div className={styles.avatarHolder}>
                  <img alt="" src={currentUser.avatar} />
                  <div className={styles.name}>{DAOInfo.daoName}</div>
                  <div>{DAOInfo?.code}</div>
                </div>
                {renderUserInfo({ ...currentUser, ...DAOInfo })}
                <Divider style={{ marginTop: 16 }} dashed />
                <div className={styles.tags}>
                  <div className={styles.tagsTitle}>简介</div>
                  <div className={styles.content}>
                    {DAOInfo?.companyProfile}
                  </div>
                </div>
                <Divider dashed />
                <div className={styles.tags}>
                  <div className={styles.tagsTitle}>使命</div>
                  <div className={styles.content}>{DAOInfo?.mission}</div>
                </div>
                <Divider dashed />
                <div className={styles.tags}>
                  <div className={styles.tagsTitle}>愿景</div>
                  <div className={styles.content}>{DAOInfo?.vision}</div>
                </div>
                <Divider dashed />

                {/* <div className={styles.team}>
                  <div className={styles.teamTitle}>团队</div>
                  <Row gutter={36}>
                    {currentUser.notice &&
                      currentUser.notice.map((item) => (
                        <Col key={item.id} lg={24} xl={12}>
                          <Link to={item.href}>
                            <Avatar size="small" src={item.logo} />
                            {item.member}
                          </Link>
                        </Col>
                      ))}
                  </Row>
                </div> */}
              </div>
            )}
          </Card>
        </Col>
        <Col lg={17} md={24}>
          <Card
            className={styles.tabsCard}
            bordered={false}
            tabList={operationTabList}
            activeTabKey={tabKey}
            onTabChange={(_tabKey: string) => {
              setTabKey(_tabKey as tabKeyType);
            }}
          >
            {renderChildrenByTabKey(tabKey)}
          </Card>
        </Col>
      </Row>
    </GridContent>
  );
};
export default Center;
